<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- saved from url=(0036)http://localhost:55699/WebForm1.aspx -->
<html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title>

</title></head>
<body>
<form method="post" action="./WebForm1.aspx_files/WebForm1.aspx.htm" id="form1">
    <div style="height: 77px; margin-left: 40px">
        <input name="TextBox1" type="text" id="TextBox1" style="height:26px;width:444px;">
        <input id="btn_search" style="height: 30px;width:80px" type="button" value="搜索"></div>
</form>

<div>
    <p style="font:14px 微软雅黑;color:#f000ff">Canvas操作测试</p>
    <img id="img1" style="display:none" src="http://www.runoob.com/images/img_the_scream.jpg" width="100" height="300"/>
</div>
<div>
    <button id="btn1" style="height:26px;width:82px;" onclick="onBtn1()">点击画线</button>
    <button id="btn2" style="height:26px;width:82px;" onclick="onBtn2()">填充</button>
    <button id="btn3" style="height:26px;width:82px;" onclick="onBtn3()">文字</button>
    <button id="btn4" style="height:26px;width:82px;" onclick="onBtn4()">圆</button>
    <button id="btn5" style="height:26px;width:82px;" onclick="onBtn5()">绘图</button>
</div>
<div>
    <p style="font-size:14px;color:#f000ff">Canvas显示:</p>
</div>
<div>
    <canvas id="myCanvas" width="600" height="600" style="border:1px solid #000000;">
</div>
</canvas>

<script>
    function onBtn1()
    {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.lineWidth = 2;
        ctx.moveTo(0, 0);
        ctx.lineTo(600, 600);
        ctx.stroke();
    }

    function onBtn2()
    {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.fillStyle = "#ff00f0";  //设置填充颜色
        ctx.fillRect(0, 0, 200, 200); //填充区域
    }

    function onBtn3()
    {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        ctx.font = "16px 微软雅黑"; //设置绘制字体
        ctx.fillStyle = "#ff0000";  //设置绘制文字的颜色
        ctx.fillText("Hello world!", 20, 60);
        //绘制空心字
        ctx.strokeText("Hello world!", 40, 60);
    }

    function onBtn4()
    {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        //绘制圆形
        ctx.beginPath();
        ctx.lineWidth = "1px";
        ctx.arc(50, 50, 20, 0, 2 * Math.PI);
        ctx.stroke();   //绘制线条
        //填充圆形
        ctx.fillStyle = "#00a000";
        ctx.beginPath();
        ctx.arc(100, 50, 20, 0, 2 * Math.PI);
        ctx.fill();     //填充线条内部区域
    }

    function onBtn5()
    {
        var canvas = document.getElementById("myCanvas");
        var ctx = canvas.getContext("2d");
        //绘制图片的两种方式，无缩放
        //1、加载DOM中的img标签
        var img = document.getElementById("img1");

        ctx.drawImage(img, 0, 100);
        //2、加载已知链接的图片
        var img1 = new Image(100, 300);
        img1.src = "http://avatar.csdn.net/6/6/B/1_mfcing.jpg";
        ctx.drawImage(img1, img.naturalWidth + 10, 100);    //naturalWidth图片的原始尺寸

        //缩放绘制
        ctx.drawImage(img, 0, 0, 30, 90);   //缩放图片尺寸到 30*90

        //只绘制部分区域
        ctx.drawImage(img, 0, 0, 100, 100, 60, 0, 90, 90);  //绘制图片的 （0，0，100，100）这个区域到 （60，0，150，150）这个区域
    }
</script>

</body></html>
